﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back()">返回</a>
            <mt-button v-if="usertype==1" slot="right" @click="add()">申请</mt-button>
        </mt-header>



        <div class="mui-card" v-for="item in list">
            <!--页眉，放置标题-->
            <div class="mui-card-header">请假人:{{item.studentname}}<span style="float:right;font-size:14px;">家长:{{item.truename}}</span></div>
            <!--内容区-->
            <div class="mui-card-content" style="padding:10px;">
                <p>请假开始日期:{{item.stime}}</p>
                <p>请假结束日期:{{item.etime}}</p>
                <p>请假天数:{{item.day}}</p>
                <p></p>

            </div>
            <!--页脚，放置补充信息或支持的操作-->
            <div class="mui-card-footer">
                请假理由:{{item.desc}}
                <button class="mui-btn mui-btn-danger" type="button" @click="sh(item)" v-if="item.state==0 && usertype==2">审核</button>
                <span v-else-if="item.state==1">已同意</span>
                <span v-else-if="item.state==-1">已拒绝</span>
                <span v-else-if="item.state==0">未审核</span>
            </div>
        </div>

        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="10" class="clearfix">
            <div class="loading">{{loading}}</div>
        </ul>

    </div>

</template>

<script>
    import header from '../components/header.vue';
    import Bus from '../bus.js'
    export default {
        name: 'app',
        data() {
            return {
                title: '请假',
                page: 1,
                list: [],
                usertype: "",
                busy: true,
                loading: "加载中..."

            }
        },
        components: {
            'h-header': header,
        },
        mounted() {
            
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.onpopstate = () => {
                Bus.$emit('val', "show");
                this.$router.go(-1);
            }
        },
        methods:
        {
            add: function () {
                Bus.$emit('val', "hide");
                this.$router.push({ name: 'leaveadd', params: {} });
            },
            sh: function (uitem) {
                Bus.$emit('val', "hide");
                this.$router.push({ name: 'leavesh', params: { id: uitem.id } });
            },
            loadMore() {

                this.$data.busy = true  //将无限滚动给禁用
                setTimeout(() => {  //发送请求有时间间隔第一个滚动时间结束后才发送第二个请求
                    this.$data.page = this.$data.page + 1;
                    this.load();
                }, 500);
            },
            load: function () {
                var studentid = window.localStorage.getItem("studentid");
                var teacherid = window.localStorage.getItem("teacherid");
                var usertype = window.localStorage.getItem("usertype");
                var page = this.$data.page;
                var _this = this;
                this.$api.post('wx/Index/getleavea', {
                    "studentid": studentid, "page": page, "teacherid": teacherid, "usertype": usertype
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {

                            if (data.data.length > 0) {
                                for (var i = 0; i < data.data.length; i++) {

                                    _this.$data.list.push(data.data[i]);
                                }


                                _this.$data.busy = false;
                            } else {

                                _this.$data.busy = true;
                                _this.$data.loading = "没有数据了";
                            }

                        }


                        console.log(_this.$data.list);

                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });

            },
            back: function () {
                Bus.$emit('val', "show")
                this.$router.go(-1);
            }
        },
        created: function () {
            var usertype = window.localStorage.getItem("usertype");
            this.$data.usertype = usertype;
            this.load();
        }

    }
</script>

<style scoped>
    @import "../assets/css/mui.min.css";

    .loading {
        width: 100%;
        margin-bottom: 2px;
        text-align: center;
    }
</style>